<template>
  <div class='home-container'>
    <v-container class='lighten-5'>
      <v-row no-gutters align='center'>
        <v-col cols='1'>
          <v-btn
            elevation='6'
            rounded
            color='white'
          >
            <v-icon
              large
            >
              mdi-chevron-left
            </v-icon>
          </v-btn>
        </v-col>
        <v-col cols='1'>
          <v-btn
            elevation='6'
            rounded
            color='white'
          >
            <v-icon
              large
            >
              mdi-chevron-right
            </v-icon>
          </v-btn>
        </v-col>
        <v-spacer></v-spacer>
        <v-col
          cols='1'
        >
          <v-hover>
            <template v-slot:default='{ hover }'>
              <v-card
                :elevation='hover ? 24 : 6'
                outlined
                class='rounded-pill'
              >
                <v-card-text>
                  <div class='home' style='text-align: center;'>首页</div>
                </v-card-text>
              </v-card>
            </template>
          </v-hover>
        </v-col>
        <v-spacer></v-spacer>
        <v-col
          cols='1'
        >
          <v-hover>
            <template v-slot:default='{ hover }'>
              <v-card
                :elevation='hover ? 24 : 6'
                outlined
                class='rounded-pill'
              >
                <v-card-text>
                  <div class='home' style='text-align: center;'>发现</div>
                </v-card-text>
              </v-card>
            </template>
          </v-hover>
        </v-col>
        <v-spacer></v-spacer>
        <v-col
          cols='1'
        >
          <v-hover>
            <template v-slot:default='{ hover }'>
              <v-card
                :elevation='hover ? 24 : 6'
                outlined
                class='rounded-pill'
              >
                <v-card-text>
                  <div class='home' style='text-align: center;'>歌单</div>
                </v-card-text>
              </v-card>
            </template>
          </v-hover>
        </v-col>
        <v-spacer></v-spacer>
        <v-col cols='5'>
          <v-text-field
            class='search-input rounded-pill'
            outlined
            label="搜索"
            prepend-inner-icon="mdi-card-search-outline"
            clearable
            v-model='searchText'
          ></v-text-field>
        </v-col>
        <v-col cols='1'>
          <v-avatar>
            <img
              src="https://cdn.vuetifyjs.com/images/john.jpg"
              alt="John"
            >
          </v-avatar>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  data () {
    return {
      searchText: ''
    }
  }
}
</script>

<style lang='less' scoped>
.search-input {
  position: absolute;
  top: 12px;
  width: 30%;
}
</style>
